<template>
  <div class="line_wrap">
    <div class="title_wrap">
      <ul>
        <li>
          <el-icon :size="30" color="#079704">
            <Bottom />
          </el-icon>
          <span>辐照激光</span>
        </li>
        <li>
          <el-icon :size="30" color="#f93232">
            <Top />
          </el-icon>
          <span>光致荧光 {{ secondsTime }}</span>
        </li>
      </ul>
      <!-- 线条效果 -->
      <div class="line_main">
        <div class="line_list">
          <div class="line_top"></div>
          <div class="line_content"></div>
        </div>
        <div class="line_list">
          <div class="line_top"></div>
          <div class="line_content"></div>
        </div>
        <div class="line_list">
          <div class="line_top"></div>
          <div class="line_content"></div>
        </div>
        <div class="line_list">
          <div class="line_top"></div>
        </div>
      </div>
      <!-- 文字展示 -->
      <div class="line_title">
        <div class="line_title_item">A, m,=1</div>
        <div class="line_title_item">A,m,=0</div>
      </div>
    </div>
    <!-- 箭头 -->
    <div class="line_arrow">
      <div class="line_arrow_top" @click="handleToggle(0)"></div>
      <div class="line_arrow_bottom" :class=" animation && 'animation'" @click="handleToggle(1)"></div>
    </div>
    <!-- 线条 -->
    <curveCharts></curveCharts>
    <!-- 柱形图 -->
    <div class="charts" ref="chartsRef" style="height: 950px"></div>
    <!-- 弹框 -->
    <lineDialog ref="lineDialogRef"></lineDialog>
  </div>
</template>

<script setup name="Line">
import { ref, reactive } from 'vue'
import * as echarts from "echarts"
import curveCharts from "../curveCharts/index.vue"
import lineDialog from "../../base/lineDialog/index.vue"

const { proxy } = getCurrentInstance();

const handleToggle = (e) => {
  if (e) {
    proxy.$refs.lineDialogRef.init(e)
  }
}
const animation = ref(false)
const secondsTime = ref(0)

function updateTime() {
  function formatTime(time) {
    return time < 10 ? `0${time}` : time
  }
  const now = new Date()
  const seconds = now.getSeconds()  //秒数
  //想展示什么  对应的展示即可 
  secondsTime.value = `${formatTime(seconds)}`
  if ((secondsTime.value > 20 && secondsTime.value < 30) || (secondsTime.value > 50 && secondsTime.value < 59)){
    animation.value = true
  }else{
    animation.value = false
  }
}


// 获取节点
let chartsRef = ref();
onMounted(() => {
  updateTime();
  const intervalId = setInterval(updateTime, 1000);
  // 将 intervalId 保存起来，以便在组件卸载时清除定时器
  window['intervalId'] = intervalId;

  //获取echarts实例
  const myCharts = echarts.init(chartsRef.value);
  myCharts.setOption({
    //标题
    // title: {
    //   text:'施工方'
    // },
    //x|y轴组件
    xAxis: {
      show: false,
      data: ["1", "2", "3", "4", "5"],
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#0c8cab" // 设置颜色渐变
        }
      },
      axisLabel: {
        color: "#fff",
        fontSize: '16',
        fontWeight: 'bold'
      },
      axisTick: {
        show: false,    // 是否显示坐标轴刻度
      },
    },
    yAxis: {
      show: false
    },
    //布局组件
    grid: {
      top: 220,
    },
    series: {
      type: 'bar',
      data: [79, 78, 79, 80, 79],
      showBackground: false, // 柱形背景色
      barWidth: '88%', // 柱形宽度
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#112f47' },//153951 
          { offset: 0.5, color: '#102f45' },
          { offset: 1, color: '#031c2f' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#087fa2' },
            { offset: 0.7, color: '#2e6384' },
            { offset: 1, color: '#153951' }
          ])
        }
      }
    },
  })
})
</script>

<style lang='scss' scoped>
.line_wrap {
  position: relative;
}

// 箭头
.title_wrap {
  position: absolute;
  top: 90px;
  width: 100%;

  ul {
    display: flex;
    justify-content: center;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;

      &:last-child {
        margin-left: 15px;
      }

      span {
        margin-left: 10px;
      }
    }
  }
}

// 文字展示
.line_main {
  margin-top: 20px;

  .line_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

    .line_top {
      height: 3px;
      width: 90%;
      background: #38779e;
    }

    .line_content {
      height: 1px;
      width: 90%;
      background: #38779e;
      margin-top: 10px;
      position: relative;

      &::after {
        content: "";
        height: 1px;
        width: 100%;
        background: #38779e;
        position: absolute;
        top: 6px;
      }

      &::before {
        content: "";
        height: 1px;
        width: 100%;
        background: #38779e;
        position: absolute;
        top: -6px;
      }
    }
  }
}

// 线条标题
.line_title {
  position: absolute;
  top: 600px;
  left: 20px;

  .line_title_item {
    color: #fff;
    margin-bottom: 76px;
    font-size: 14px;
  }
}

.line_arrow{
  width: 192px;
  height: 430px;
  position: absolute;
  top: 230px;
  left: 125px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  .line_arrow_top{
    width: 50px;
    height: 100%;
    background: linear-gradient(to bottom, #088e09, transparent);
    position: relative;
    margin-top: 24px;
    // animation: myfirst 1.5s linear infinite alternate;
    &::before{
      content: "";
      position: absolute;
      left: -25px;
      top: -33px;
      border-bottom: 34px solid #088e09;
      border-top: 0px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
    }
  } 
  .line_arrow_bottom{
    position: absolute;
    top: 65px;
    width: 50px;
    height: 100%;
    background: linear-gradient(to top, #e53132, transparent);
    position: relative;
    animation: mylast 1.5s linear infinite alternate;
    &::before{
      content: "";
      position: absolute;
      left: -25px;
      bottom: -33px;
      border-top: 34px solid #e53132;
      border-bottom: 0px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
    }
  }
}

.line_arrow .animation{
  animation: mylast 0.5s linear infinite alternate;
}

@keyframes myfirst {
  0% {
    margin-top: 48px;
  }
  100% {
    margin-top: 24px;;
  }
}
@keyframes mylast {
  0% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0px;;
  }
}
</style>